<script setup>
defineProps({
  order: {
    type: Object,
    required: true,
  },
})
</script>

<template>
  <view class="plan-card mb">
    <!-- 客户信息独占一行 -->
    <view class="info-item full-width">
      <view class="info-icon">👥</view>
      <view class="info-content">
        <text class="info-label">客户</text>
        <text class="info-value">{{ order.company }}</text>
      </view>
    </view>
    <!-- 其他信息一行显示两个 -->
    <view class="info-row">
      <view class="info-item half-width">
        <view class="info-icon">📅</view>
        <view class="info-content">
          <text class="info-label">建单日期</text>
          <text class="info-value">{{ order.createdate }}</text>
        </view>
      </view>
      <view class="info-item half-width">
        <view class="info-icon">🏗️</view>
        <view class="info-content">
          <text class="info-label">月台</text>
          <text class="info-value">{{ order.platformnum }}</text>
        </view>
      </view>
    </view>
    <view class="info-row">
      <view class="info-item half-width">
        <view class="info-icon">🚚</view>
        <view class="info-content">
          <text class="info-label">车辆</text>
          <text class="info-value">{{ order.platenumber }}</text>
        </view>
      </view>
      <view class="info-item half-width">
        <view class="info-icon">⏱️</view>
        <view class="info-content">
          <text class="info-label">预计到达时间</text>
          <text class="info-value">{{ order.expectdate }}</text>
        </view>
      </view>
    </view>
  </view>
</template>



<style lang="scss" scoped>
.plan-card {
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1rpx solid #f0f0f0;
  padding: 20rpx;
}

/* 客户信息独占一行 */
.info-item.full-width {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

/* 行容器 */
.info-row {
  display: flex;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

/* 信息项占据一半宽度 */
.info-item.half-width {
  display: flex;
  align-items: flex-start;
  width: calc(50% - 10rpx);

  &:first-child {
    margin-right: 20rpx;
  }
}

.info-item .info-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  margin-top: 4rpx;
  opacity: 0.8;
}

.info-item .info-content {
  flex: 1;
}

.info-item .info-label {
  display: block;
  font-size: $list-font-size;
  color:$list-color;
  margin-bottom: 6rpx;
  font-weight: 400;
}

.info-item .info-value {
  display: block;
  font-size: $list-font-size;
  color:$list-color;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;
}
</style>
